import { getFabAreaSelectOptions, getFabNameOptions, getgetQuotaNameOptions } from "@/api/modules/fab";
import { querySystemSelect } from "@/api/equip/archive";
import { useRouterStoreHook } from "@/store/modules/router";
import { PxIcon } from "px-ui";
import { Back, Right } from "@px-ui/icons-vue";

/**
 * @description: 获取search配置信息
 * @return {Array<CommonSearch.SearchOption>}
 */
export const useSearchOption = (): Array<CommonSearch.SearchOption> => {
  const tabSearchRouterStore = useRouterStoreHook();
  const classCode: CommonSearch.SearchOption = {
    label: "科室",
    key: "classCode",
    value: "",
    defaultValue: tabSearchRouterStore.getClassName || "",
    type: "select",
    relation: "systemCode",
    relationType: "tree-select",
    props: {
      // clearable: tabSearchRouterStore.getSubject === "ALL"
      clearable: tabSearchRouterStore.getClassList?.length > 1
    },
    // axiosApi: queryClassList,
    option: tabSearchRouterStore.getClassList,
    // mapOption: ({ itemName: label, itemValue: value }) => ({ label, value }),
    mapOption: ({ name: label, code: value }) => ({ label, value }),
    relationApi: querySystemSelect,
    getParams: (className: string) => ({ className, factoryArea: "" }),
    relationMapOption: ({ name: label, code: value }) => ({ label, value }),
    placeholder: "请选择科室"
  };

  const systemCode: CommonSearch.SearchOption = {
    label: "系统",
    key: "systemCode",
    value: "",
    type: "tree-select",
    nodeKey: "code",
    treeSelectProps: {
      label: "name",
      children: "children"
    },
    relation: "classCode",
    relationDefault: true,
    placeholder: "请选择系统"
  };

  const areaId: CommonSearch.SearchOption = {
    label: "区域",
    key: "areaId",
    value: "",
    type: "select",
    axiosApi: getFabAreaSelectOptions,
    // mapOption: ({ areaId: value = "", areaCode: label = "" }: any) => ({ value, label }),
    formatOption: (res: Array<any>): Array<any> => {
      return res?.map(({ areaId: value = "", areaCode: label = "" }: any) => ({ value, label }))?.filter(({ value, label }) => !!value && !!label);
    },
    placeholder: "请选择区域"
  };

  const eqpId: CommonSearch.SearchOption = {
    label: "机台编号",
    key: "eqpId",
    value: null,
    type: "select",
    remote: true,
    selectRemoteApi: getFabNameOptions,
    getParams: (fabName: string) => fabName,
    mapOption: (item: string) => ({ value: item, label: item }),
    placeholder: "请输入机台编号"
  };

  const indicatorName: CommonSearch.SearchOption = {
    label: "指标名称",
    key: "indicatorName",
    value: null,
    type: "select",
    remote: true,
    selectRemoteApi: getgetQuotaNameOptions,
    getParams: (quotaName: string) => quotaName,
    mapOption: (item: string) => ({ value: item, label: item }),
    placeholder: "请输入指标名称"
  };

  const indicatorLevel: CommonSearch.SearchOption = {
    label: "指标级别",
    key: "indicatorLevel",
    value: null,
    type: "select",
    typeCode: "SPCL",
    placeholder: "请选择指标级别"
  };

  return [classCode, systemCode, areaId, eqpId, indicatorName, indicatorLevel];
};

/**
 * @description: 获取table表格的表头（cloumns）信息
 * @return {*}
 */
export const useTableCloumns = (): Array<CommonTable.TableCloumnsType> => {
  const tagMapOption = new Map([
    [
      "Key-key",
      {
        value: "Key-key",
        label: "Key-key",
        rgb: "39, 192, 141"
        // color: "#10b981",
        // backgroundColor: "#ecfdf5"
      }
    ],
    [
      "key",
      {
        value: "key",
        label: "key",
        rgb: "245, 158, 0"
        // color: "#fda620",
        // backgroundColor: "#fcf6ec"
      }
    ],
    [
      "non-key",
      {
        value: "non-key",
        label: "non-key",
        rgb: "78, 142, 247"
        // color: "#3b82f6",
        // backgroundColor: "#eff6ff"
      }
    ]
  ]);
  return [
    // {
    //   label: "JOB ID",
    //   prop: "jobId",
    //   width: 150
    // },
    {
      label: "指标名称",
      prop: "indicatorName"
    },
    {
      label: "指标级别",
      prop: "indicatorLevel",
      width: 110,
      tagMapOption,
      defaultTagValue: "普通",
      mapRow: ({ row: { indicatorLevel = "" } }: any) => ({ value: indicatorLevel, label: indicatorLevel })
    },
    {
      label: "系统",
      prop: "systemName",
      width: 110
    },
    {
      label: "子系统",
      prop: "childSystemName",
      width: 110
    },
    {
      label: "点位",
      prop: "point"
    },
    {
      label: "机台编号",
      prop: "eqpId"
    },
    {
      label: "USL",
      prop: "uslValue",
      width: 85,
      renderHeader() {
        const getStyleFn = () => {
          return {
            display: "flex",
            alignItems: "center",
            gap: "6px"
          };
        };
        return () => (
          <div style={getStyleFn()}>
            <div>USL</div>
            <PxIcon size={20}>
              <Back />
            </PxIcon>
          </div>
        );
      }
    },
    {
      label: "UCL",
      prop: "uclValue",
      width: 85,
      renderHeader() {
        const getStyleFn = () => {
          return {
            display: "flex",
            alignItems: "center",
            gap: "6px"
          };
        };
        return () => (
          <div style={getStyleFn()}>
            <span>UCL</span>
            <PxIcon size={20}>
              <Back />
            </PxIcon>
          </div>
        );
      }
    },
    {
      label: "UWL",
      prop: "uwlValue",
      width: 85,
      renderHeader() {
        const getStyleFn = () => {
          return {
            display: "flex",
            alignItems: "center",
            gap: "6px"
          };
        };
        return () => (
          <div style={getStyleFn()}>
            <span>UWL</span>
            <PxIcon size={20}>
              <Back />
            </PxIcon>
          </div>
        );
      }
    },
    {
      label: "Target",
      prop: "targetValue",
      width: 85
    },
    {
      label: "LWL",
      prop: "lwlValue",
      width: 85,
      renderHeader() {
        const getStyleFn = () => {
          return {
            display: "flex",
            alignItems: "center",
            gap: "6px"
          };
        };
        return () => (
          <div style={getStyleFn()}>
            <span>LWL</span>
            <PxIcon size={20}>
              <Right />
            </PxIcon>
          </div>
        );
      }
    },
    {
      label: "LCL",
      prop: "lclValue",
      width: 85,
      renderHeader() {
        const getStyleFn = () => {
          return {
            display: "flex",
            alignItems: "center",
            gap: "6px"
          };
        };
        return () => (
          <div style={getStyleFn()}>
            <span>LCL</span>
            <PxIcon size={20}>
              <Right />
            </PxIcon>
          </div>
        );
      }
    },
    {
      label: "LSL",
      prop: "lslValue",
      width: 85,
      renderHeader() {
        const getStyleFn = () => {
          return {
            display: "flex",
            alignItems: "center",
            gap: "6px"
          };
        };
        return () => (
          <div style={getStyleFn()}>
            <span>LSL</span>
            <PxIcon size={20}>
              <Right />
            </PxIcon>
          </div>
        );
      }
    }
  ];
};

/**
 * @description: 初始化默认颜色 参考px-ui 颜色
 * @param {string} code
 * @param {string} value
 * @return {*}
 */
export const initDefaultColor = (code?: string, value?: string) => {
  if (value) {
    return value;
  } else if (code) {
    switch (code) {
      case "uslColor":
        // return "#ff0000";
        return "#EF4444";
      case "uclColor":
        // return "#0000ff";
        return "#3B82F6";
      case "uwlColor":
        // return "#ffff00";
        return "#F59E0B";
      case "targetColor":
        // return "#008000";
        return "#10B981";
      case "lwlColor":
        // return "#ffff00";
        return "#F59E0B";
      case "lclColor":
        // return "#0000ff";
        return "#3B82F6";
      case "lslColor":
        // return "#ff0000";
        return "#EF4444";
    }
  } else {
    return "#f5f5f5";
  }
};
